<template>
	<div id="search-picture-view">
		<div class="page-header">
			<h2 class="page-title">以图搜图</h2>
			<p class="page-description">基于AI技术，为您找到相似的图片</p>
		</div>
		
		<!-- 原图展示区域 -->
		<div class="original-image-section">
			<h3 class="section-title">
				<span class="title-icon">🔍</span>
				原图
			</h3>
			<div class="original-image-container">
				<div class="image-wrapper">
					<img 
						:alt="picture?.name" 
						:src="picture?.url" 
						class="original-image"
						@load="onImageLoad"
						@error="onImageError"
					/>
					<div class="image-overlay" v-if="picture">
						<div class="image-info">
							<div class="image-name">{{ picture.name || '未命名图片' }}</div>
							<div class="image-meta">
								<span v-if="picture.picWidth && picture.picHeight" class="resolution">
									{{ picture.picWidth }} × {{ picture.picHeight }}
								</span>
								<span v-if="picture.picFormat" class="format">
									{{ picture.picFormat.toUpperCase() }}
								</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 搜索结果区域 -->
		<div class="search-results-section">
			<h3 class="section-title">
				<span class="title-icon">🎯</span>
				识图结果
				<span class="result-count" v-if="!loading && dataList.length > 0">
					(共找到 {{ dataList.length }} 个相似结果)
				</span>
			</h3>
			<!-- 图片结果列表 -->
			<a-list
				:grid="{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }"
				:data-source="dataList"
				:loading="loading"
				class="search-results-list"
			>
				<template #renderItem="{ item: picture }">
					<a-list-item style="padding: 0">
						<a :href="picture.fromUrl" target="_blank" class="result-link">
							<a-card hoverable class="result-card">
								<template #cover>
									<img 
										:alt="picture?.name" 
										:src="picture?.thumbUrl" 
										class="result-image"
									/>
								</template>
								<a-card-meta>
									<template #description>
										<div class="result-info">
											<div class="source-info">来源网站</div>
										</div>
									</template>
								</a-card-meta>
							</a-card>
						</a>
					</a-list-item>
				</template>
				<template #empty>
					<div class="empty-result">
						<div class="empty-icon">🔍</div>
						<div class="empty-text">暂未找到相似图片</div>
						<div class="empty-tip">请尝试使用其他图片进行搜索</div>
					</div>
				</template>
			</a-list>
		</div>
	</div>
</template>

<script setup lang="ts">
import { getPictureVoByIdUsingGet, searchPictureByPictureUsingPost } from '@/api/pictureController'
import { message } from 'ant-design-vue'
import { onMounted, ref, computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const pictureId = computed(() => {
	return route.query?.pictureId
})
const picture = ref<API.PictureVO>()
// 获取图片数据
const fetchPictureDetail = async () => {
	try {
		// 获取展示用的图片信息
		const res = await getPictureVoByIdUsingGet({ id: pictureId.value as any })
		if (res.data.code === 0 && res.data.data) {
			picture.value = res.data.data
		} else {
			message.error('获取图片详情失败：' + res.data.message)
			return
		}
	} catch (error: any) {
		message.error('获取图片详情失败：' + error.message)
	}
}

const dataList = ref<API.ImageSearchResult[]>([])
const loading = ref<boolean>(true)

// 图片加载成功处理
const onImageLoad = () => {
	console.log('原图加载成功')
}

// 图片加载失败处理
const onImageError = () => {
	message.error('原图加载失败')
}

// 获取搜图列表结果
const fetchResultData = async () => {
	loading.value = true
	try {
		const res = await searchPictureByPictureUsingPost({ pictureId: pictureId.value as any })
		if (res.data.code === 0 && res.data.data) {
			dataList.value = res.data.data ?? []
		} else {
			message.error('获取搜图结果失败：' + res.data.message)
		}
	} catch (error: any) {
		message.error('获取搜图结果失败：' + error.message)
	}
	loading.value = false
}

onMounted(() => {
	// 页面加载时获取原图数据
	fetchPictureDetail()
  // 获取搜图结果
	fetchResultData()
})
</script>

<style scoped lang="scss">
#search-picture-view {
	padding: 24px;
	max-width: 1200px;
	margin: 0 auto;
	background: #fafafa;
	min-height: 100vh;
}

// 页面头部
.page-header {
	text-align: center;
	margin-bottom: 32px;
	padding: 24px 0;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 12px;
	color: white;
	box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);

	.page-title {
		font-size: 28px;
		font-weight: 600;
		margin: 0 0 8px 0;
		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.page-description {
		font-size: 16px;
		margin: 0;
		opacity: 0.9;
	}
}

// 区域标题样式
.section-title {
	display: flex;
	align-items: center;
	font-size: 20px;
	font-weight: 600;
	color: #333;
	margin-bottom: 16px;
	padding-bottom: 8px;
	border-bottom: 2px solid #e8e8e8;

	.title-icon {
		margin-right: 8px;
		font-size: 18px;
	}

	.result-count {
		font-size: 14px;
		font-weight: 400;
		color: #666;
		margin-left: 8px;
	}
}

// 原图展示区域
.original-image-section {
	margin-bottom: 40px;

	.original-image-container {
		display: flex;
		justify-content: center;
		padding: 20px;
		background: white;
		border-radius: 12px;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
		border: 1px solid #f0f0f0;

		.image-wrapper {
			position: relative;
			max-width: 500px;
			width: 100%;
			border-radius: 8px;
			overflow: hidden;
			box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
			transition: all 0.3s ease;

			&:hover {
				transform: translateY(-4px);
				box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
			}

			.original-image {
				width: 100%;
				height: auto;
				max-height: 400px;
				object-fit: contain;
				display: block;
				background: #f8f9fa;
			}

			.image-overlay {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
				color: white;
				padding: 20px 16px 16px;
				transform: translateY(100%);
				transition: transform 0.3s ease;

				.image-info {
					.image-name {
						font-size: 16px;
						font-weight: 600;
						margin-bottom: 4px;
						text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
					}

					.image-meta {
						display: flex;
						gap: 12px;
						font-size: 12px;
						opacity: 0.9;

						.resolution,
						.format {
							background: rgba(255, 255, 255, 0.2);
							padding: 2px 6px;
							border-radius: 4px;
							backdrop-filter: blur(4px);
						}
					}
				}
			}

			&:hover .image-overlay {
				transform: translateY(0);
			}
		}
	}
}

// 搜索结果区域
.search-results-section {
	background: white;
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	border: 1px solid #f0f0f0;

	.search-results-list {
		.result-link {
			display: block;
			text-decoration: none;
			color: inherit;

			&:hover {
				text-decoration: none;
				color: inherit;
			}
		}

		.result-card {
			border-radius: 8px;
			overflow: hidden;
			transition: all 0.3s ease;
			border: 1px solid #f0f0f0;

			&:hover {
				transform: translateY(-2px);
				box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
				border-color: #d9d9d9;
			}

			.result-image {
				height: 180px;
				object-fit: cover;
				width: 100%;
				transition: transform 0.3s ease;
			}

			&:hover .result-image {
				transform: scale(1.05);
			}

			.result-info {
				padding: 4px 0;

				.source-info {
					font-size: 12px;
					color: #666;
					text-align: center;
				}
			}
		}
	}

	// 空状态样式
	.empty-result {
		text-align: center;
		padding: 60px 20px;
		color: #999;

		.empty-icon {
			font-size: 48px;
			margin-bottom: 16px;
			opacity: 0.6;
		}

		.empty-text {
			font-size: 16px;
			font-weight: 500;
			margin-bottom: 8px;
			color: #666;
		}

		.empty-tip {
			font-size: 14px;
			color: #999;
		}
	}
}

// 响应式设计
@media (max-width: 768px) {
	#search-picture-view {
		padding: 16px;
	}

	.page-header {
		padding: 16px;
		margin-bottom: 24px;

		.page-title {
			font-size: 24px;
		}

		.page-description {
			font-size: 14px;
		}
	}

	.original-image-section {
		.original-image-container {
			padding: 16px;

			.image-wrapper {
				.original-image {
					max-height: 300px;
				}
			}
		}
	}

	.search-results-section {
		padding: 16px;
	}

	.section-title {
		font-size: 18px;
	}
}
</style>
